#include ("/_includes/_layout_wechat.html")
#define css()
<link href="#(webctx)/resources/css/menu-config.css" rel="stylesheet"/>
#end
#@layout("商品回复", "wxmall,点步科技", "Wxmall社区","wxmall") 
#define content()
<div class="wrapper wrapper-content">
	<div class="content row ibox-content col-sm-10">
	<div class="content-tabs">
			<nav class="page-tabs J_menuTabs">
		       <div class="page-tabs-content">
		           <a href="#(webctx)/menu/reply" class="J_menuTab">菜单回复</a>
		           <a href="#(webctx)/keywords/reply" class="J_menuTab">关键字回复</a>
		           <a href="#(webctx)/order/reply" class="J_menuTab">订单回复</a>
		           <a href="#(webctx)/product/reply" class="J_menuTab active">商品回复</a>
		           <a href="#(webctx)/points/reply" class="J_menuTab">积分回复</a>
		       </div>
		   	</nav>
		</div>
  <div class="menu_setting_area js_editBox"> 
   <div class="menu_preview_area"> 
    <div class="mobile_menu_preview"> 
     <div class="mobile_hd tc">
     	#if(session.weapp_in_session??) 
     		#(session.weapp_in_session.nick_name) 
     	#end</div> 
     <div class="mobile_bd">
     	 <div class="chat-discussion" style="margin-top: 12px;">
              <div class="chat-message" style="padding: 0 0 !important;">
                  <img class="message-avatar" src="http://wx.qlogo.cn/mmopen/BqvlDRnYWYZEGQZgmic2tvNb6H1Ju14c3jYpIs9BWG8g1T6kjAIP6DBNCHDribJDnaFicZkVia9BwjQSCpxSJvgvYdSjKWZ8a6f0/0" alt="">
                  <div class="message">
                      <a class="message-author" href="javascript:void(0)">商品售罄提醒</a>
                      <span class="message-content">商品xxx，已经售罄，生意兴隆，赶快补货吧</span>
                      <span class="message-content">商品名称:xxxxxxxxxx</span>
                  </div>
              </div>
	     </div>
     </div> 
    </div>
    <div class="alert alert-danger" style="padding-top: 10px;display: none;" id="menu_click_alert"></div>
   </div> 
   
    <!-- 菜单编辑区域 -->
    <div class="menu_form_area"> 
    <div id="js_rightBox" class="portable_editor to_left" style="display: block;">
     <div class="editor_inner"> 
        <div class="global_mod float_layout menu_form_hd js_second_title_bar"> 
       		<h4>提醒内容设置</h4> 
      	</div> 
      	<div class="menu_form_bd"> 
      	<div class="menu_content_container"> 
        	<div class="menu_content" style="overflow:hidden;">
                <label class="checkbox-inline" for="chkbox1">
					<input id="chkbox1" name="notify_content_chk" value="1" type="checkbox" checked="checked" style="vertical-align: middle;margin-top:2px; margin-bottom:1px" onchange="selectRule(this)">
					<span class="label-text">新订单提醒</span>
				</label>
				<label class="checkbox-inline" for="chkbox2">
					<input id="chkbox2" name="notify_content_chk" value="2" type="checkbox" checked="checked" style="vertical-align: middle;margin-top:2px; margin-bottom:1px" onchange="selectRule(this)">
					<span class="label-text" style="vertical-align: middle">订单已支付提醒</span>
				</label>
				<label class="checkbox-inline" for="chkbox3">
					<input id="chkbox3" name="notify_content_chk" value="3" type="checkbox" checked="checked" style="vertical-align: middle;margin-top:2px; margin-bottom:1px" onchange="selectRule(this)">
					<span class="label-text" style="vertical-align: middle">订单退款提醒</span>
				</label>
        	</div>
       	</div> 
      </div>
     
      <div class="global_mod float_layout menu_form_hd js_second_title_bar"> 
       <h4 class="global_info1">通知接收者设置</h4> 
      </div> 
      <div class="menu_form_bd" id="view"> 
      	<div class="menu_content_container"> 
			<div id="users-list" class="menu_content"></div>
       	</div>
       	<div class="msg_sender_msg mini_tips warn"> 
	       	<a href="javascript:void(0)" class="btn btn-primary btn-xs" onclick="openAddWechatUserDialog()">新增消息接收者</a>
	       	<i class="fa fa-question-circle" onmouseout="layer.closeAll();" onmouseover="layer.tips('消息接收者，建议设置成为您店铺客服人员或者销售，请使用需要接收提醒的用户微信扫码。', this, {tips: [1, '#3595CC'],time: 0});"></i>
	    </div>
      </div> 
     </div> 
    </div>
   </div> 
  </div>
  	<div class="panel-footer" align="center">
   	 	<button id="saveMenu" class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i>提交</button>
	</div>
	</div>
	
	<div class="help">
       	<div>
             <h5>功能描述</h5>
             <ul class="list-unstyled project-files">
                 <li><a href="javascript:void(0)">根据订单状态，及时通知公众号运营者，让公众号运营者随时掌握店铺订单动态信息</a></li>
             </ul>
             <br/>
             <h5><font color="blue">温馨提示</font></h5>
             <ul class="list-unstyled project-files">
             	 <li><a href="javascript:void(0)">每个菜单独立配置</a></li>
                 <li><a href="javascript:void(0)">新增通知接收者后，需要勾选复选框才能让接收者接收到访问提醒</a></li>
                 <li><a href="javascript:void(0)">新增，移除通知接收者，对所有消息提醒生效</a></li>
             </ul>
             <br/>
             <h5><font color="red">特别注意</font></h5>
             <ul class="list-unstyled project-files">
             	 <li><a href="javascript:void(0)" style="color:red;">有赞支持多个插件配置，但是带参数二维码扫码通知只会通知给一个插件，所以，如果需要使用通知提醒功能，需要关闭其他插件的带参数二维码扫码事件</a></li>
             </ul>
         </div>
     </div>
</div>
<!-- html 模板文件开始 -->
<script type="text/template" id="user_item_tpl">
<div class="chat-user">
	<input type="checkbox" name="notifyer_radio" data-id="{{id}}" {{if checked}} checked="checked" {{/if}} style="float:left;margin-right:10px;"/>
    <img class="chat-avatar" src="{{headimgurl}}" alt="">
    <div class="chat-user-name">
        <a href="javascript:void(0)">{{nickname}}</a>
<a href="javascript:void(0)" data-id="{{id}}" data-nick="{{nickname}}" onclick="delNotiyer(this)" class="pull-right label label-danger"><font color="white">移除</font></a>
    </div>
</div>
</script>
<!-- html 模板文件结束 -->
#define script()
<script type="text/javascript">
function selectRule(obj){
	if($(obj).val() == 3){
		$("#notify_rule_span").show();
	}else{
		$("#notify_rule_span").hide();
	}
}
function showMsg(msg){
	$("#menu_click_alert").html(msg);
	$("#menu_click_alert").show();
	setTimeout(function(){
		hideMsg();
	}, 5000);
}
function hideMsg(){
	$("#menu_click_alert").empty();
	$("#menu_click_alert").hide();	
}

function setRuleConfig(ruleCfg){
	if(ruleCfg){
		$(":radio[name='notify_rule_config'][value='" + ruleCfg.ruleType + "']").prop("checked", "checked");
		$("#rule_config_id").val(ruleCfg.id);
		if(ruleCfg.expiresIn){
			$("#notify_rule_span").show();
			$("#notify_expires_in").val(ruleCfg.expiresIn);
		}
	}else{
		$(":radio[name='notify_rule_config'][value='1']").prop("checked", "checked");
		$("#notify_rule_span").hide();
		$("#rule_config_id").val("");$("#notify_expires_in").val("");
	}
}

function delNotiyer(obj){
	obz.showMessage("移除后就不能接收任何消息通知，确认移除"+$(obj).attr("data-nick")+"吗?", function(){
		var id = $(obj).attr("data-id");
		obz.ajaxJson("#(webctx)/menu/notify/delNotifyer", {id : id}, function(resp){
			if(resp.state == "ok"){
				obz.msg("操作成功", function(){
					getNotifyCfg(getMenuKey());
				})
			}		
		});
	});
}

//加载通知者列表数据
function getNotifyCfg(menuKey){
	$("#users-list").mask("正在读取用户数据...");
	obz.ajaxJson("#(webctx)/menu/notify/list", {menuKey : menuKey}, function(resp){
		$("#users-list").unmask();
		if(resp.state == "ok"){
			var ruleCfg = resp.notifyRule;
			setRuleConfig(ruleCfg);
			var data = resp.data;
			if(!data){
				$("#users-list").html("还没有消息通知接收者");
				return;
			}
			$("#users-list").empty();
			var users = data;
			for(var i=0;i<users.length;i++){
				var user = users[i];
				//直接显示通知者列表
				var itemHtml = template("user_item_tpl", user);
				$("#users-list").append(itemHtml);
			}
		}
	});
}

var addNotifyerDialog = null;
function openAddWechatUserDialog(obj){
	var url = "#(webctx)/menu/notify/addNotifyer";
	addNotifyerDialog = BootstrapDialog.show({
		size: BootstrapDialog.SIZE_SMALL,
		title: "请使用您的微信扫一扫",
        message: $('<div></div>').load(url)
    });
	return false;
}

function closeDialog(){
	if(addNotifyerDialog) addNotifyerDialog.close();
}

setTimeout(function(){
	isScanSucceed();
}, 1000 * 3);

function isScanSucceed(){
    if($("#scenceId").val() != null){
    	log("======isScanSucceed:" + Math.random());
        $.ajax({url: "#(webctx)/menu/notify/checkScan",
            type: "POST",
            data: { "scenceId": $("#scenceId").val(), "csrf_token": $("#CSRF_TOKEN_HIDDEN").val()},
            cache: false
        }).done(function (resp){
        	if(resp ==null || resp.state != "ok"){
        		var error = resp.message ? "系统错误" : resp.message;
                obz.error(error, function(){
                	closeDialog();
                });
                return;
        	}
        	
        	if(resp !=null && resp.state == "ok"){
        		if(!resp.data){
        			setTimeout(isScanSucceed, 1500);
        		}else{
                    log("=============="+resp.data);
                    getNotifyCfg(getMenuKey());
                    closeDialog();
        		}
        	}
       }).fail(function () {
           setTimeout(isScanSucceed, 1500);
       });
    }else{
        setTimeout(isScanSucceed, 1000 * 3);
    }
}
//加载通知者列表数据
function getNotifyers(){
	$("#users-list").mask("正在读取用户数据...");
	obz.ajaxJson("#(webctx)/menu/notify/list", {}, function(resp){
		$("#users-list").unmask();
		if(resp.state == "ok"){
			var ruleCfg = resp.notifyRule;
			setRuleConfig(ruleCfg);
			var data = resp.data;
			if(!data){
				$("#users-list").html("还没有消息通知接收者");
				return;
			}
			$("#users-list").empty();
			var users = data;
			for(var i=0;i<users.length;i++){
				var user = users[i];
				//直接显示通知者列表
				var itemHtml = template("user_item_tpl", user);
				$("#users-list").append(itemHtml);
			}
		}
	});
}
$(document).ready(function(){
	getNotifyers();
	
	$("#add_notify_config").click(function(){
		$("#menu-config-list").append($("#notify_type_tpl").html());
	});
	
	$("#saveMenu").click(function(){
		obz.info("功能开发中...");
		return;
		//获取当前选中的菜单
		var openIdArr = new Array();
		//获取选中的被通知者
		$("input:checkbox[name='notifyer_radio']:checked").each(function() { // 遍历name=test的多选框
		  	var notifyerId = $(this).attr("data-id");  // 每一个被选中项的值
		  	log("====openId:" + notifyerId);
		  	var openIdEntity = new Object();
		  	openIdEntity.notifyerId = notifyerId;
		  	openIdArr.push(openIdEntity);
		});
		
		if(openIdArr.length<=0){
			obz.warn("请至少选择一个通知接收者");
			return;
		}
		
		//获取通知规则
		var ruleConfigType = $(':radio[name="notify_rule_config"]:checked').val();
		log("rule:" + ruleConfigType);
		if(ruleConfigType == 3){
			var expiresIn = $("#notify_expires_in").val();
			if(expiresIn == null || expiresIn == ""){
				obz.warn("回复规则配置中，按时间间隔回复，请填写时间间隔值");
				return;
			}
		}
		
		//rule config
		var ruleConfigObj = new Object();
		ruleConfigObj.cfgType = ruleConfigType;
		ruleConfigObj.id = $("#rule_config_id").val();
		ruleConfigObj.expiresIn = $("#notify_expires_in").val();
		
		//提交到后台
		var params = {};
		params.notifyers = JSON.stringify(openIdArr);
		params.menuKey = menuKey;
		params.notifyRuleConfig = JSON.stringify(ruleConfigObj);
		
		$(".menu_form_area").mask("正在保存菜单配置...");
		obz.ajaxJson("#(webctx)/menu/notify/save", params, function(resp){
			$(".menu_form_area").unmask();
			if(resp.state == "ok"){
				obz.msg("保存成功");
			}
		});
	});
});
</script>
#end
#end